<template>
    <div>
        <page-main>
            <!-- tabs -->
            <el-tabs v-model="search.show_type" type="card" class="demo-tabs" @tab-click="getList">
                <el-tab-pane label="线索转化" name="1" />
                <el-tab-pane label="客户转化" name="2" />
            </el-tabs>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="线索创建时间">
                                <el-date-picker
                                    v-model="search.date"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="handleDateChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="来源渠道">
                                <el-select v-model="search.user_from" placeholder="请选择">
                                    <el-option
                                        v-for="item in dict.from_list"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- 表格 table -->
            <el-table v-show="search.show_type=='1'" ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column prop="name" fixed label="渠道名称" width="140" />
                <el-table-column prop="xinzeng" fixed sortable label="新增线索" width="110" />
                <el-table-column prop="wuxiao" sortable label="无效线索" width="110" />
                <el-table-column prop="wuxiao_rate" sortable label="无效线索率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.wuxiao_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="kehu" sortable label="转客数" width="100" />
                <el-table-column prop="kehu_rate" sortable label="线索转客率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.kehu_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="shangji" sortable label="商机数" width="100" />
                <el-table-column prop="shangji_rate" sortable label="线索转商机率" width="130">
                    <template #default="scope">
                        <span>{{ `${scope.row.shangji_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="yuyue" sortable label="预约人数" width="110" />
                <el-table-column prop="yuyue_rate" sortable label="线索预约率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.yuyue_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="shangmen" sortable label="上门人数" width="110" />
                <el-table-column prop="shangmen_rate" sortable label="线索上门率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.shangmen_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="chengjiao" sortable label="成交客户数" width="120" />
                <el-table-column prop="chengjiao_rate" sortable label="线索成交率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.chengjiao_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fugou" sortable label="复购客户数" width="120" />
                <el-table-column prop="fugou_rate" sortable label="线索复购率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.fugou_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="order" sortable label="订单数" width="100" />
                <el-table-column prop="order_price" sortable label="订单金额" width="120" />
                <el-table-column prop="shoukuan_price" sortable label="收款金额" width="120" />
                <el-table-column prop="avg_order_price" sortable label="平均订单金额" width="130" />
                <el-table-column prop="avg_shou_price" sortable label="平均成交金额" width="130" />
                <!-- <el-table-column prop="" sortable label="平均成交周期" width="120" /> -->
            </el-table>
            <el-table v-show="search.show_type=='2'" ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column prop="name" fixed label="渠道名称" width="140" />
                <el-table-column prop="xinzeng" fixed sortable label="新增客户数" width="120" />
                <el-table-column prop="yuyue" sortable label="预约客户数" width="120" />
                <el-table-column prop="yuyue_rate" sortable label="预约率" width="100">
                    <template #default="scope">
                        <span>{{ `${scope.row.yuyue_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="yuyue_day" sortable label="客户预约周期（天）" width="180" />
                <el-table-column prop="yuyue_shangmen" sortable label="预约上门数" width="120" />
                <el-table-column prop="yuyue_shangmen_rate" sortable label="预约上门率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.yuyue_shangmen_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="yuyue_shangmen_day" sortable label="预约上门周期（天）" width="180" />
                <el-table-column prop="shangmen_rate" sortable label="客户上门率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.shangmen_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="shangmen_day" sortable label="客户上门周期（天）" width="180" />
                <el-table-column prop="shangmen_chengjiao" sortable label="上门成交数" width="120" />
                <el-table-column prop="shangmen_chengjiao_rate" sortable label="上门成交率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.shangmen_chengjiao_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="shangmen_chengjiao_day" sortable label="上门成交周期（天）" width="180" />
                <el-table-column prop="chengjiao" sortable label="客户成交数" width="120" />
                <el-table-column prop="chengjiao_rate" sortable label="客户成交率" width="120">
                    <template #default="scope">
                        <span>{{ `${scope.row.chengjiao_rate}%` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="chengjiao_day" sortable label="客户成交周期（天）" width="180" />
                <el-table-column prop="order" sortable label="订单数" width="110" />
                <el-table-column prop="order_price" sortable label="订单金额" width="120" />
                <el-table-column prop="order_shou_price" sortable label="收款金额" width="120" />
                <el-table-column prop="order_avg_shou_price" sortable label="平均收款金额" width="130" />
            </el-table>
        </page-main>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { qudaozhuanhua } from '@/api/analysis'
export default {
    name: 'List',
    filters: {
        typeFilter(val) {
            const map = {
                1: '体验',
                2: '新购',
                3: '增购',
                4: '复购'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                1: '进行中',
                2: '已完成'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                user_from: '',
                show_type: '1',
                start: '',
                end: ''
            },
            dataList: []
        }
    },
    computed: {
        ...mapState(["dict"])
    },
    mounted() {
        this.getList();
    },
    methods: {
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search.start = '';
            this.search.end = '';
            this.search.memberIds = '';
            this.search.pages = 1;
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            qudaozhuanhua(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                }
                this.loading = false;
            })
        },
        handleDateChange(e) {
            this.search.start = e ? e[0] : ''
            this.search.end = e ? e[1] : ''
        }
    }
}
</script>
